.home {
  width: 1277px;
  margin: auto;
}
.home_title_nav {
  height: 75px;
  width: 100%;
  background: #ec4141;
  display: flex;
  align-items: center;
}
.home_title_nav .nav_left {
  width: 50%;
  height: 100%;
  display: flex;
  padding: 0 25px;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
}
.home_title_nav .nav_left .nav_left_sm_box {
  display: flex;
  align-items: center;
}
.home_title_nav .nav_left .nav_left_sm_box .logo {
  margin-right: 10px;
  padding-top: 5px;
}
.home_title_nav .nav_left .nav_left_sm_box .logo img {
  width: 100%;
  height: 100%;
}
.home_title_nav .nav_left .nav_left_sm_box .name {
  font-size: 23px;
  color: #fff;
}
.home_title_nav .nav_left .nav_left_ipt {
  display: flex;
}
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon .icon_left {
  margin-right: 10px;
}
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon div {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background: #e13e3e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon div .el-icon-arrow-left,
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon div .el-icon-arrow-right {
  color: #ccc;
}
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon div .el-icon-arrow-left:hover,
.home_title_nav .nav_left .nav_left_ipt .nav_left_icon div .el-icon-arrow-right:hover {
  color: #fff;
}
.home_title_nav .nav_left .nav_left_ipt .search {
  margin-right: 10px;
  position: relative;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc {
  z-index: 10000;
  background-color: #fff;
  width: 450px;
  height: 566px;
  position: absolute;
  top: 40px;
  border-radius: 5px;
  left: -70px;
  box-sizing: border-box;
  overflow-y: auto;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box {
  padding-top: 20px;
  width: 100%;
  box-sizing: border-box;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .history_delete {
  font-size: 20px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .history_delete span {
  display: inline-block;
  margin-right: 15px;
  color: #777;
  user-select: none;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .history_delete .el-icon-delete {
  margin: 0;
  cursor: pointer;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .history_delete .el-icon-delete:hover {
  color: black;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .look_all {
  color: #777;
  cursor: pointer;
  user-select: none;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .tc_title_box .look_all:hover {
  color: black;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .search_history {
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .search_history div {
  margin: 0 5px;
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .search_history div:hover {
  background-color: #f0f0f0;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .search_history div:hover .search_history_delete {
  display: block;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .search_history div .search_history_delete {
  display: inline-block;
  position: absolute;
  top: calc(50% - 16px);
  font-size: 14px;
  line-height: 33px;
  color: #666;
  right: 10px;
  display: none;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top {
  font-size: 20px;
  color: #777;
  padding: 0 20px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content {
  padding-top: 15px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item {
  display: flex;
  padding: 10px 0px;
  box-sizing: border-box;
  cursor: pointer;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item:hover {
  background-color: #f0f0f0;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .index {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  color: #ccc;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .index_top_three {
  font-weight: bold;
  color: #e4393c;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count span {
  display: inline-block;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .name {
  font-weight: bold;
  margin-right: 10px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .img_top_icon {
  width: 13px;
  height: 15px;
  margin-right: 5px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .img_top_icon img {
  width: 100%;
  height: 100%;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .img_hot_icon {
  width: 30px;
  height: 15px;
  margin-right: 5px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .img_hot_icon img {
  width: 100%;
  height: 100%;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .name_count .count {
  color: #ccc;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box .hot_search_top_box .hot_search_top_content .hot_search_top_item .name_count_desc .desc {
  color: #777;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .tc_box2_title {
  padding: 10px;
  color: 12px;
  color: #777;
  cursor: pointer;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .tc_box2_title:hover {
  color: black;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_title {
  display: flex;
  align-items: center;
  background: #f0f0f0;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_title .img {
  width: 15px;
  margin: 5px 10px;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_title .img img {
  width: 100%;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_item,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_item,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_itme {
  padding: 8px 0;
  padding-left: 35px;
  cursor: pointer;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_item .alias,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_item .alias,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_itme .alias {
  color: #777;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .song_item:hover,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_item:hover,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_itme:hover {
  background: #f0f0f0;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_title,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_title {
  display: flex;
  align-items: center;
  background: #f0f0f0;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_title .img,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_title .img {
  width: 20px;
  margin: 5px 10px;
  display: flex;
  align-items: center;
}
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .singer_title .img img,
.home_title_nav .nav_left .nav_left_ipt .search .tc .tc_box2 .zj_title .img img {
  width: 100%;
}
.home_title_nav .nav_left .nav_left_ipt input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 30px;
  padding-left: 24px;
  box-sizing: border-box;
  background: #e13e3e;
  color: #fff;
}
.home_title_nav .nav_left .nav_left_ipt input::-webkit-input-placeholder {
  color: #ccc;
}
.home_title_nav .nav_left .listen_to_music {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #e13e3e;
}
.home_title_nav .nav_left .listen_to_music img {
  width: 50%;
}
.nav_right {
  background-color: pink;
}
.center_content {
  display: flex;
  height: 680px;
}
.center_content .center_left {
  width: 250px;
  background: #fff;
  padding: 10px 5px 10px 10px;
}
.center_content .center_left .left_nav {
  height: 40px;
  background-color: #fff;
  margin-bottom: 10px;
  line-height: 40px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}
.center_content .center_left .left_nav_title {
  color: #666;
  user-select: none;
}
.center_content .center_right {
  flex: 1 0 80%;
  background-color: #fff;
  border-left: 1px solid #ccc;
  padding: 10px 0 10px 20px;
  box-sizing: border-box;
}
.active {
  background: #ccc !important;
  color: black;
  font-weight: bold;
}
.left_nav_title {
  margin-bottom: 10px;
}
.my_create .left_nav_create {
  display: flex;
  justify-content: space-between;
}
.my_create .left_nav_create .create_show {
  cursor: pointer;
}
.my_create .left_nav_create .add_ipt {
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}
.player {
  border-top: 1px solid #ccc;
  background: #fff;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}
.player .music_info {
  align-items: center;
  display: flex;
  width: 250px;
}
.player .music_info .img {
  width: 60px;
  height: 60px;
  background: #ccc;
  cursor: pointer;
  position: relative;
}
.player .music_info .img img {
  width: 60px;
  height: 60px;
}
.player .music_info .img .icon {
  background-color: rgba(30, 30, 30, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 40px;
  text-align: center;
  line-height: 60px;
  opacity: 0;
}
.player .music_info .img:hover .icon {
  opacity: 1;
}
.player .music_info .name_collection_author {
  max-width: 200px;
  margin-left: 10px;
}
.player .music_info .name_collection_author .name_collection {
  display: flex;
}
.player .music_info .name_collection_author .name_collection .collection {
  height: 30px;
  width: 30px;
}
.player .music_info .name_collection_author .name_collection .collection img {
  height: 30px;
  cursor: pointer;
  width: 30px;
}
.player .music_info .name_collection_author .name_collection .name {
  color: #333;
  margin-right: 10px;
  line-height: 30px;
  cursor: pointer;
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.player .music_info .name_collection_author .name_collection .name .alias {
  color: #888;
}
.player .music_info .name_collection_author .author {
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  text-overflow: ellipsis;
}
.player .center_player .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.player .center_player .btn .left_btn {
  height: 30px;
  width: 30px;
  background-size: cover;
  background-image: url("../images/on.png");
}
.player .center_player .btn .left_btn:hover {
  background-image: url("../images/on_active1.png");
}
.player .center_player .btn .center_btn {
  margin: 0 15px;
}
.player .center_player .btn .center_btn:hover {
  color: #e4393c;
}
.player .center_player .btn .right_btn {
  height: 30px;
  width: 30px;
  background-size: cover;
  background-image: url("../images/next.png");
}
.player .center_player .btn .right_btn:hover {
  background-image: url("../images/next_active.png");
}
.player .center_player .btn div {
  width: 50px;
  font-size: 50px;
  line-height: 50px;
  cursor: pointer;
}
.player .center_player .progres_time {
  display: flex;
  align-items: center;
}
.player .center_player /deep/ .progres .el-slider__runway {
  width: 500px !important;
  margin: 0 10px;
}
.player .sound_box {
  display: flex;
  align-items: center;
}
.player .sound {
  height: 36px;
  width: 36px;
  background-size: cover;
}
.player .sound img {
  width: 35px;
  height: 35px;
}
.player /deep/ .el-slider__button.hover,
.player .el-slider__button:hover {
  cursor: pointer !important;
}
.player /deep/ .el-slider__button-wrapper.hover,
.player .el-slider__button-wrapper:hover {
  cursor: pointer !important;
}
.player /deep/ .el-slider__button-wrapper {
  opacity: 0;
}
.player /deep/ .el-slider__runway:hover .el-slider__button-wrapper {
  opacity: 1;
}
.player /deep/ .el-slider__button {
  background: #e4393c;
  width: 10px;
  height: 10px;
  border: none;
}
.player /deep/ .el-slider__runway {
  height: 4px;
}
.player /deep/ .el-slider__runway:hover {
  height: 6px;
}
.player /deep/ .el-slider__runway:hover .el-slider__bar {
  height: 6px;
}
.player /deep/ .el-slider__bar {
  height: 4px;
  background-color: #e4393c;
}
.player .block {
  width: 100px;
}
.play_list {
  position: relative;
}
.play_list .play_list_img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;
}
.play_list .lists {
  position: absolute;
  top: -711px;
  left: -440px;
  height: 680px;
  width: 500px;
  z-index: 10000;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.9);
}
.play_list .lists .play_history {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  background-color: #fff;
  line-height: 40px;
}
.play_list .lists .title {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.play_list .lists .title .list_count {
  color: #999;
}
.play_list .lists .title .delete_box {
  display: flex;
  cursor: pointer;
}
.play_list .lists .title .delete_box .delete_img {
  width: 20px;
  height: 20px;
}
.play_list .lists .title .delete_box .delete_img img {
  height: 20px;
  width: 20px;
}
.play_list .lists .list {
  width: 100%;
  height: 30px;
  background: #fff;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  cursor: default;
}
.play_list .lists .list div {
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 10px;
}
.play_list .lists .list .music_name {
  flex: 0 0 53%;
}
.play_list .lists .list .music_name .alias {
  color: #999;
}
.play_list .lists .list .music_man_name {
  flex: 0 0 20%;
}
.play_list .lists .list .music_time {
  flex: 0 0 12%;
  color: #999;
}
.play_list .lists .list .music_delete {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.play_list .lists .list .music_delete img {
  width: 100%;
  height: 100%;
}
.play_list .lists .list.active {
  color: #e4393c;
  font-weight: normal;
}
.pleyer_show {
  width: 100%;
  height: 90px;
  background: #fff;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ccc;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #666;
}
/* 动画效果 */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-com-enter-active,
.slide-com-leave-active,
.slide-back-enter-active,
.slide-back-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 100%, 0);
}
.slide-com-enter {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
.slide-com-leave-active {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.slide-back-enter {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.slide-back-leave-active {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
